<template>
    <div class='crumbs-box-common'>
        <div class="w1200 content-box"> 
            <div class="crumbs">
                <i class="el-icon-s-home home-style-icon" @click='pathIndex()'></i>
                <el-breadcrumb separator-class="el-icon-arrow-right">
                    <el-breadcrumb-item ><span @click='pathIndex()' class="cur">首页</span></el-breadcrumb-item>
                    <el-breadcrumb-item class="cur" :class='twoNav ? "subNav-box":"subNav-box"' ><span style="color:#3246c4;" @click='toNav()'>{{oneNav}}</span></el-breadcrumb-item>
                    <el-breadcrumb-item v-if='twoNav' class='subNav-box cur'><span style="color:#3246c4;" @click='toTwoNav()'>{{twoNav}}</span></el-breadcrumb-item>
                    <el-breadcrumb-item v-if='detailFlag' class='subNav-box cur'>{{dateilName+'的参赛作品详情'}}</el-breadcrumb-item>
                </el-breadcrumb>
            </div>
            <div class="right-subnav" v-if='rightFlag'>
                {{oneNav}}
                <div class="Line">
                </div>
            </div>
        </div>
    </div>
</template>
<script>
  export default {
    data() {
        return {
            
        }
    },
    props:{
         oneNav: String,
         twoNav: String,
         rightFlag: Boolean,
        //  detailFlag:Boolean,
        //  dateilName:String
    },
    mounted() {
        
    },
    methods: {
        pathIndex(){
            this.$router.push({ path: '/',query:{articleType:null} })
            this.$store.commit('setChange',Math.random()*10000000)
        },
        toNav(){
            let obj = {
                '项目申报':'/declare?articleType=1',
                '学科竞赛':'/competition?articleType=2',
                '创新创业':'/innovate?articleType=5',
                '讲座论坛':'/forum?articleType=4',
                '学科竞赛':'/competition?articleType=2',
                '科学竞赛':'/competition?articleType=2',
                "研究生电子设计竞赛":'/match?articleType=3',
                '研科协':'/afrat?articleType=6'
            }
            this.$router.push({
                path:obj[this.oneNav]
            })
            this.$store.commit('setChange',Math.random()*10000000)
        },
        toTwoNav(){
            this.$store.commit('showDetail',false)
        }
    },
    computed:{
        dateilName:function(){
            return this.$store.state.detailName
        },
        detailFlag:function(){
            return this.$store.state.detailFlag
        }
    }
  }
</script>

<style lang="scss" >
  @import "../../assets/css/common.css";
    .crumbs-box-common{
        padding: 18px 0;
        width: 100%;
        border-bottom: 1px solid #eee;
        .home-style-icon{
            color:#3246c4;
            margin-right: 10px;
            font-size: 22px;
            float: left;
            vertical-align: middle;
        }
        .crumbs{
            // display:-webkit-box;
            // display: -moz-box;
            // display: -ms-flexbox;
            // display: -webkit-flex;
            // display: flex;
            // /* 09版 */
            // -webkit-box-align: center;
            // /* 12版 */
            // -webkit-align-items: center;
            // -moz-align-items: center;
            // -ms-align-items: center;
            // -o-align-items: center;
            // align-items: center;
            font-size: 16px;
            z-index: 1000;
        }
        .content-box{
            // display: flex;
            // align-items: center;
            // justify-content: space-between;
            margin: 0 auto !important;
        }
        .right-subnav{
            float: right;
            color:#3246c4;
            font-weight: 600;
            // height: 100%;
            // border-bottom: 2px solid #3246c4;
            // padding-bottom: 15px; 
            position: relative;
            margin-top: -20px;
            .Line{
                width: 100%;
                height: 3px;
                background-color: #3246c4;
                position: absolute;
                top: 37px;
            }
        }
    }
    .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover,
    .el-breadcrumb__item:last-child .el-breadcrumb__inner{
        color:#3246c4 ;
    }
    .el-breadcrumb{
        font-size: 16px;
    }
    .el-breadcrumb__inner{
        line-height: 22px;
    }
</style>